<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="static/js/jquery.js"></script>
		<script type="text/javascript" src="static/js/qrcode.min.js"></script>

	</head>

	<body>
		<div id="container">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd" v-if="isLogin">
							{{username}},欢迎您
						</div>
						<div class="menu-hd" v-else>
							<a href="login.html" target="_top" class="h">亲，请登录</a>
							<a href="register.html" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
					</div>
					<div class="topMessage favorite">
						<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
				</ul>
			</div>

			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logo"><img src="static/images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="static/images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

		
			<div style="background: lightgrey; height: 600px; margin-top: 40px; padding: 15px;">
				<div style="width:65%; background: white; height: 540px; margin: auto; padding-left: 50px;">
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<h3>商品名称：{{orderInfo.productNames}}</h3>
					<p></p>
					<h3>订单编号：{{orderInfo.orderId}}</h3>
					<p>&nbsp;</p>
					<h3>订单金额：￥ {{orderInfo.totalPrice}}</h3>
					<hr/>
					<div id="div1">
						<div id="payQrcode" style="width: 200px; height: 200px;border:#0084C7 1px solid" ></div>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
		<script type="text/javascript" src="static/js/vue.js" ></script>
		<script type="text/javascript" src="static/js/axios.min.js" ></script>
		<script type="text/javascript">
			var baseUrl = "http://localhost:8080/";
			var webSocketBaseUrl = "ws://localhost:8080/";

			var vm = new Vue({
				el:"#container",
				data:{
                    username:"",
                    userImg:"",
                    isLogin:false,
                    orderInfo:{},
				},
				//vue生命周期：创建对象--beforeCreate--初始化data--created--加载模板--beforeMount--渲染数据--mounted
				created:function () {
                    var token = getCookieValue("token");
                    //console.log(token);
                    if (token!=null&&token!=""){
                        this.isLogin=true;
                        this.username = getCookieValue("username");
                        this.userImg = getCookieValue("userImg");
                	}
                    var jsonstr = localStorage.getItem("orderInfo");
                    if (jsonstr!=null){
                        localStorage.removeItem("orderInfo");//只做一次
					}
                    var orderInfo = eval("("+jsonstr+")");//转成对象
                    //console.log(orderInfo);
                    this.orderInfo = orderInfo;
				},
				mounted:function () {
					var qrcode = new QRCode($("#payQrcode")[0],{
					    height:200,
						width:200
					});
					qrcode.makeCode(this.orderInfo.payUrl);

					//前端发送websocket连接请求
					var websocket = null;
					var webSocketUrl = webSocketBaseUrl + "/webSocket/"+this.orderInfo.orderId;
					websocket = new WebSocket(webSocketUrl);

					//只要后端通过websocket向此连接发消息就会触发onmessage事件
					websocket.onmessage = function (event) {
						var msg = event.data;
						if (msg=="1"){
						    $("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
						}
                    }
                },
				methods:{

				},
			});
		</script>
		
		
	</body>

</html>